<template>
  <a-card shadow="never">
    <template #title>
      <div class="card_header">
        <SearchForm :formInputs="state.formInputs" @submit="search" />
      </div>
    </template>
    <div class="table">
      <p :style="{ textAlign: 'right', marginBottom: '20px' }">
        <a-button @click="action('add')" type="primary" link
          ><template #icon><PlusOutlined /></template> 添加</a-button
        >
      </p>
      <a-table
        :data-source="state.tableData"
        :columns="[
          {
            title: '主键',
            dataIndex: 'id',
            key: 'id',
          },
          {
            title: '用户名',
            dataIndex: 'userName',
            key: 'userName',
          },
          {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '电话',
            key: 'tel',
            dataIndex: 'tel',
          },
          {
            title: '所属医院',
            key: 'hospitalName',
            dataIndex: 'hospitalName',
          },
          {
            title: '操作',
            key: 'action',
            width: '150',
            align: 'center',
          },
        ]"
        :pagination="{ total: state.total }"
        @change="handleTableChange"
        stripe
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space :size="10" spacer="|">
              <a-button type="primary" @click="action('remove', record)" link
                ><template #icon><DeleteOutlined /></template> 删除</a-button
              >
              <a-button type="primary" @click="action('edit', record)" link
                ><template #icon><EditOutlined /></template> 编辑</a-button
              >
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
    <FormModal
      :formConfig="state.formConfig"
      @submit="submit"
      ref="dialogRef"
    />
  </a-card>
</template>

<script setup>
import { onBeforeMount, getCurrentInstance, reactive, ref } from "vue";
import _ from "lodash";
import FormModal from "@/components/FormModal.vue";
import SearchForm from "@/components/SearchForm.vue";

const { proxy } = getCurrentInstance();
const state = reactive({
  formInputs: [
    {
      label: "医院",
      type: "select",
      name: "hospitalId",
      defaultValue: -1,
      options: [],
    },
    { label: "名称", type: "input", name: "name" },
  ],
  formConfig: {
    title: "用户信息提交",
    items: [
      {
        label: "用户名",
        type: "input",
        name: "userName",
        rules: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 5,
            max: 35,
            message: "长度必须在5-35",
            trigger: "change",
          },
        ],
      },
      {
        label: "密码",
        type: "password",
        name: "pwd",
        rules: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 5,
            max: 35,
            message: "长度必须在5-35",
            trigger: "change",
          },
        ],
      },
      {
        label: "名称",
        type: "input",
        name: "name",
        rules: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          {
            min: 5,
            max: 35,
            message: "长度必须在5-35",
            trigger: "change",
          },
        ],
      },
      {
        label: "电话",
        type: "input",
        name: "tel",
      },
      {
        label: "医院",
        type: "select",
        name: "hospitalId",
        rules: [
          {
            required: true,
            message: "请选择所属医院",
            trigger: "change",
          },
        ],
        options: null,
      },
    ],
  },
  tableData: [],
  total: 0,
});
const dialogRef = ref();

const getList = (page, size) => {
  proxy.$axios
    .get("/user/list", {
      params: { page, size },
    })
    .then(({ success, data }) => {
      if (success) {
        state.tableData = data.list;
        state.total = data.total;
      }
    });
};

const handleTableChange = ({ current }) => {
  getList(current, 10);
};

const search = (value) => {
  console.log(value);
};

const submit = (value) => {
  console.log(value);
};

const action = (type, record) => {
  if (type === "add") {
    dialogRef.value.handleOpenForm({});
  } else if (type === "edit") {
    dialogRef.value.handleOpenForm(record);
  }
};

//生命周期钩子函数
onBeforeMount(() => {
  proxy.$axios
    .get("/hospital/list", {
      params: { page: 1, size: 8 },
    })
    .then(({ success, data }) => {
      if (success) {
        const newData = _.groupBy(data.list, "area");
        const list = _.map(newData, (v, k) => {
          const children = _.reduce(
            v,
            (arr, o) => {
              arr.push({ label: o.name, value: o.id });
              return arr;
            },
            []
          );
          return { label: k, children };
        });

        const searchHospSelect = _.find(state.formInputs, {
          name: "hospitalId",
        });
        searchHospSelect.options = [{ label: "不限", value: -1 }, ...list];

        const formHospSelect = _.find(state.formConfig.items, {
          name: "hospitalId",
        });
        formHospSelect.options = list;
      }
    });

  getList(1, 10);
});
</script>

<style lang="less" scoped>
.card_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
